<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap-responsive.css" />
    <link rel="stylesheet" type="text/css" href="../../Css/style.css" />
    <script type="text/javascript" src="../../Js/jquery.js"></script>
    <script type="text/javascript" src="../../Js/bootstrap.js"></script>
    <script type="text/javascript" src="../../Js/ckform.js"></script>
    <script type="text/javascript" src="../../Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }


    </style>

</head>
<body>
<form id="myForm" action="index.html" method="post" class="definewidth m20">
    <!--<input type="hidden" name="id" value="{$user.id}" />-->
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft" >资源名称</td>
            <td><input type="text" name="menuName"/><span id="menuNameMsg"></span></td>
        </tr>
        <tr>
            <td class="tableleft">url</td>
            <td><input type="text" name="url"  /><span id="urlMsg"></span></td>
        </tr>
        <tr>
            <td class="tableleft">是否有效</td>
            <td>
                <input type="radio" name="status" value="0" checked/> 有效
                <input type="radio" name="m_state" value="1" /> 无效
            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button type="button" id="btnAdd" class="btn btn-primary" type="button">添加</button>&nbsp;&nbsp;
                <button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>

<script>

    $(function () {

        //资源名称校验--资源菜单的唯一性和非空验证
        $("input[name='menuName']").blur(function () {
            isMenuName();
        })

        //菜单URL路径的非空验证
        $("input[name='url']").blur(function () {
            isUrl();
        })

        //提交按钮的单击事件
        $("#btnAdd").click(function () {
                $.ajax({
                    type: "POST",
                    url: "/menu",
                    data: $("#myForm").serialize(),
                    dataType:"json",
                    success: function(vo){
                        if(vo.code==200) {
                            window.location.href = "/Resource/index.html";
                        }else{
                            alert("添加失败！"+vo.msg);
                        }
                    }
                });
        });

        //返回列表
        $('#backid').click(function(){
            window.location.href="index.html";
        });
    });


    //资源名称校验--资源菜单的唯一性和非空验证
    function isMenuName() {
        var menuName = $("input[name='menuName']").val();
        if (menuName==""){
            $("#menuNameMsg").html("菜单不能为空!");
            $("#menuNameMsg").css("color","red")
        }else {
            $.ajax({
                type: "GET",
                url: "/menu/menuName",
                data: "menuName="+menuName,
                dataType:"json",
                success: function(vo){
                    if(vo.code==200) {
                        $("#menuNameMsg").html(vo.msg);
                        $("#menuNameMsg").css("color","green")
                    }else{
                        $("#menuNameMsg").html(vo.msg);
                        $("#menuNameMsg").css("color","red")
                    }
                }
            });
        }
    }

    //菜单URL路径的非空验证
    function isUrl() {
        var url = $("input[name='url']").val();
        if (url==""){
            $("#urlMsg").html("url不能为空!");
            $("#urlMsg").css("color","red")
        }else {
            $("#urlMsg").html("url非空验证通过!");
            $("#urlMsg").css("color","green")
        }
    }




</script>

</body>
</html>